<template>
	<view class="wf-item-page">
		<image :src="item.img_url" mode="widthFix" class="item-img" />
		<view class="title">
			{{item.title}}
		</view>
		<view class="bottom">
			<view class="item-info" @tap.stop="person(item.user_id)">
				<image :src="item.avatar" mode="aspectFill" class="info-avatar" />
				<view class="info-nickname">{{item.nicheng}}</view>
			</view>
			<view class="like-num" :class="[item.is_like == 2 ? 'zan_active' : '']" @tap.stop="giveUp(item.video_id,item.is_like,item.key)">
				<view>
					<i v-if="item.is_like==2" class="iconfont iconxihuan"></i>
					<i v-else class="iconfont iconxinaixin"></i>
				</view>
				<text v-if="item.likenum < 10000">{{item.likenum}}</text>
				<text v-else>{{item.likenum / 10000}}w</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				require: true
			}
		},
		methods:{
			person:function(user_id){
				this.$emit('person',{user_id:user_id})
			},
			giveUp:function(video_id,is_like,key){
				if(is_like==2){
					this.item['is_like'] = 0;
				}else{
					this.item['is_like'] = 2;
				}
				this.$emit('giveUp',{video_id:video_id,is_like:is_like,index:key,
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wf-item-page {
		background: #fff;
		overflow: hidden;
		border-radius: 10upx !important;
	}

	.item-img {
		width: 100%;
		border-radius: 10upx 10upx 0upx 0upx;
	}

	.title {
		margin-left: 10upx;
		font-size: 30upx;
		font-weight: 400;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;


	}

	.bottom {
		display: flex;
		justify-content: space-between;
	}

	.item-info {
		display: flex;
		align-items: center;
		padding: 10upx;
	}

	.like-num {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-right: 10upx;
		color: #666666;
		view {
			font-size: 22upx;
		}
		.iconxihuan{
			font-size: 34upx;
			color: #F10000;
			margin-right: 8upx;
		}
		.iconxinaixin{
			font-size: 26upx;
			color: #666666;
			margin-right: 8upx;
		}
	}

	
	.info-avatar {
		width: 40upx;
		height: 40upx;
		border-radius: 50%;
		margin-right: 10upx;
	}

	.info-nickname {
		font-size: 20upx;
		color: #666;
	}
</style>
